<template>
  <el-col :span="props.col || infoGroup.col.value">
    <div :class="[ns.b()]">
      <label>{{ renderLable() }}</label>
      <div class="info-inner"><slot /></div>
    </div>
  </el-col>
</template>
<script lang="ts">
  export default { name: 'infoComponent' }
</script>

<script setup lang="ts">
  // ui层和业务层，暴露一些方法
  import { useUamespace } from '@/hooks/use-namesapce'
  // interface
  import type { InfoItemInterface } from './types/props'
  // inject
  const infoGroup = inject('infoGroupKey', undefined)
  //   console.log('infoGroup', infoGroup)
  /**
   * props
   */
  const props = withDefaults(defineProps<InfoItemInterface>(), {
    colon: () => true,
  })
  /**
   * 渲染label
   */
  const renderLable = () => {
    return `${props.label}${props.colon ? '：' : ''}`
  }

  const ns = useUamespace('info-item')
</script>

<style lang="scss" scoped>
  @include b(info-item) {
    display: flex;
    height: 24px;
    label {
      display: flex;
      align-items: center;
      color: $color6;
    }
    .info-inner {
      line-height: 24px;
    }
  }
</style>
